<template>
    <div>
        <el-dialog
                :title="userForm.userName ? $t('common.edit'):$t('common.add')"
                :visible.sync="editDialog"
                :before-close="cancelAdd"
                width="700px"
                lock-scroll
                center>
            <el-form ref="userForm" :model="userForm" label-width="100px" :hide-required-asterisk='true'
                     label-position="left">
                <el-form-item v-for="item,key in userForm" :label="$t('user.'+key)" :rules="userFormRules[key]"
                              v-if="key !== 'id'"
                              :prop="key">
                    <el-select v-if="key === 'userType'" v-model="userForm[key]" :clearable="true"
                               @change="changeRoleState"
                    >
                        <el-option
                        v-for="item in roleOptions"
                        :key="item.value"
                        :label="$t('option.'+item.label).indexOf('.')>-1?item.label:$t('option.'+item.label)"
                        :value="item.value">
                        </el-option>
                    </el-select>


                    <el-input v-else v-model="userForm[key]"
                              :disabled="disabledInput.includes(key)"
                              :type="inputType[key]"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelAdd">{{$t('common.cancel')}}</el-button>
                <el-button type="primary" @click="confirmAddTable">{{$t('common.confirm')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

    //:label="$t('option.'+item.label).indexOf('.')>-1?item.label:$t('option.'+item.label)"
    import {roleState} from '../../config/index'
    import crypto from 'crypto'
    export default {
        name: "userEdit",
        components:{
        },
        props:{
            userForm:{
                type:Object,
                default(){
                    return {
                        userName:'',
                        userType:0,
                        groupId:0,
                        passwd:'',
                    }
                }
            },

            refresh:{
                type:Boolean,
                default:false
            },
            editDialog:{
                type:Boolean,
                default:false
            }
        },
        created(){
            console.log(this.userForm)
        },
        data(){
            return {
                userFormRules:{
                    userName: [{required: true, message: this.$t('user.userNameInputNoDataTip'), trigger: 'blur'}],
                },
                disabledInput:['id'],
                inputType:{
                    groupId:'number',
                    passwd:'password'
                },
                uploadList: [],
                roleOptions:roleState,
            }
        },
        methods:{

            confirmAddTableCheck(){
                let valid = true
                this.$refs['userForm'].validate(v => {
                    valid = v
                })
                return valid
            },
            confirmAddTable() {
                if(!this.confirmAddTableCheck()) return
                let params = {}
                Object.assign(params, this.userForm)

                if (!params.id) delete params.id

                this.$userAdd([params]).then(response => {
                    if (response.code && response.code === 'success') {
                        params.id?this.$message.success(this.$t('common.editSuccess')):this.$message.success(this.$t('common.addSuccess'))
                        this.$emit("update:editDialog",false)
                        this.$emit("update:refresh",true)
                    } else {
                        this.$message.error(this.$t('common.error'))
                    }
                })
            },
            cancelAdd() {
                this.$emit("update:editDialog",false)
                this.resetForm()
            },
            resetForm() {
                let userForm = {
                    id:'',
                    userName:'',
                    userType:0,
                    groupId:0,
                    passwd:'',
                }
                this.uploadList = []
                this.$emit("update:userForm",userForm)
                this.$refs.userForm.clearValidate()
            },

        },

        watch: {

        }
    }
</script>

<style scoped>

</style>